<#include "../common/_header.htm">
    <div class="content-wrapper" style="margin-left: 0px">
        <section class="content">
            <div class="row">
                <div id="abstr">
                    <div class="stream_search" >
                        <el-form id="listForm" :inline="true" :model="form" class="demo-form-inline">

                            <el-form-item label="金额">
                                <el-input v-model="form.minMoney" name="minmoney" placeholder=""></el-input>
                            </el-form-item>
                            <el-form-item class="el-form-item refsh" label="至">
                                <el-input v-model="form.maxMoney" name="maxmoney" placeholder=""></el-input>
                            </el-form-item>
                            <el-form-item label="关键字">
                                <el-input v-model="form.rivalName" placeholder="摘要"></el-input>
                            </el-form-item>
                            <!--<el-form-item class="form_z" label="时间范围">
                                <el-date-picker
                                        v-model="form.beginTime"
                                        name="beginTime"
                                        type="date"
                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item class="el-form-item" label="至">
                                <el-date-picker
                                        v-model="form.endTime"
                                        name="endTime"
                                        type="date"
                                >
                                </el-date-picker>
                            </el-form-item>-->
                            <div class="zcdbtn-con">
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">分析</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button class="el-button el-button--default reset_button" @click="clear">重置</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="exportExcel" class="daobtn">导出</el-button>
                            </el-form-item>
                                </div>
                        </el-form>
                    </div>
                    <div class="stream_body" >
                        <div class="casemanage-switchtip">
                            <div class="casemanage-zhexiantu" :class="{active:showType==1}" @click="dg()"  title="切换为列表显示">
                                <i class="casemanage-switchtip-list"></i><span>列表</span>
                            </div>
                            <div class="casemanage-list" :class="{active:showType==0}" @click="getlist(0)"  title="切换为图表显示">
                                <i class="casemanage-switchtip-chart" id="font_zhexian"></i><span>图表</span>
                            </div>
                        </div>
                        <div v-show="!showType" style="height: 300px;margin: 10px 10px 30px;display: flex">
                            <div style=" height: 300px;width: 50%">
                                <div id="main1" style="height:300px;"></div>
                            </div>
                            <div style=" height: 300px;width: 50%">
                                <div id="main2" style="height:300px;"></div>
                            </div>
                        </div>
                        <div v-show="showType">
                            <table id="dg"></table>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </div>
    <script>
    	var caseId=parent.caseId;
	    $(document).ready(function(){
			 $(window).resize(function(){
                 $('#dg').datagrid('resize',{
                     // height:($(window).height())-150
                     height:($(window).height())-($('.stream_search').outerHeight(true))-50,
                 });
			});
		});
        var arr=[]
        let abstr=new Vue({
           el:"#abstr",
           data:{
               dialogVisible:false,
               showType:1,
               tableData: [],
               tableData2: [],
               currentPage:1,
               currentPage2:1,
               form: {
                   rivalName: '',
                   beginTime: '',
                   endTime: '',
                   minMoney:"",
                   maxMoney:""
               },
               pageSize:20,
               total:"",
               total2:"",
               contentAbstract:"",
           },
           created:function () {
               arr = arr.join(',');
               this.getlist(1);
           },
           filters: {
               formatDate(time) {
                   var date = new Date(time);
                   return formatDate(date, 'yyyy-MM-dd hh:mm');
               },
               formatMoney(value) {
               	if(!value) return 0;
                   if (Number.isInteger(value)) {
                       return value.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,');
                   } else {
                       return value.toString().replace(/(\d)(?=(\d{3})+\.)/g,'$1,');
                   }
               },
           },
           methods: {
               showDialog(val){
                   this.contentAbstract=val;
                   this.getdetail();
                   this.dialogVisible=true;
               },
               handleSizeChange(val){
                   this.pageSize=val;
                   this.getlist(1)
               },
               getdetail(){
                   request({
                       url: 'bill/stream/inaccountstatistics_detail/'+this.currentPage2+'/10',
                       method: 'post',
                       data:{
                           cardList:arr,
                           casemanageId:caseId,
                           contentAbstract:this.contentAbstract
                       }
                   }).then(result=>{
                       this.tableData2 = result.data.data.rows;
                       this.total2=result.data.data.total;
                   })
               },
               sortChangedata(column){
                   request({
                       url: 'bill/stream/inaccountstatistics_detail/'+this.currentPage2+'/10',
                       method: 'post',
                       data:{
                           cardList:arr,
                           casemanageId:caseId,
                           contentAbstract:this.contentAbstract,
                           sortName:column.prop,
                           sortOrder:column.order.replace("ending","")
                       }
                   }).then(result=>{
                       this.tableData2 = result.data.data.rows;
                   this.total2=result.data.data.total;
               })
               },
               sortChange(column) {
                   request({
                       url: 'bill/stream/abstractstatistics/'+this.currentPage+'/'+this.pageSize,
                       method: 'post',
                       data:{
                           rivalName: this.form.rivalName,
                           beginTime: getMyDate(this.form.beginTime),
                           endTime: getMyDate(this.form.endTime),
                           cardList:arr,
                           showType : 1,
                           caseId:caseId,
                           minMoney: this.form.minMoney,
                           maxMoney: this.form.maxMoney,
                           sortName:column.prop,
                           sortOrder:column.order.replace("ending","")
                       }
                   }).then(result=>{
                       this.tableData=result.data.data.rows;
                       this.total=result.data.data.total;
                   })
               },
               handleCurrentChange2(val) {
                   this.currentPage2 = val;
                   this.getdetail()
               },
               clear(){
                   this.form={
                       rivalName: '',
                       beginTime: '',
                       endTime: '',
                       minMoney:"",
                       maxMoney:""
                   }
               },
               onSubmit() {
                   if (this.showType==1){
                       dg()
                   } else{
                       this.getlist(0)
                   }
               },
               exportExcel(){
                   //let a = "rivalName="+this.form.rivalName+"&minMoney="+this.form.minMoney+"&maxMoney="+this.form.maxMoney+"&beginTime="+getMyDate(this.form.beginTime)+"&endTime="+getMyDate(this.form.endTime)+"&cardList="+arr;
                   //window.location.href="${ctx}/bill/stream/export/8?"+a;
                   var xhr = new XMLHttpRequest();
                   var url="${ctx}/bill/stream/export/8";
                   xhr.open('POST', url, true);
                   xhr.responseType = "blob";  // 返回类型blob
                   // 定义请求完成的处理函数
                   xhr.onload = function () {
                       // 请求完成
                       if (this.status === 200) {
                           var content = this.response;
                           var aTag = document.createElement('a');
                           var blob = new Blob([content]);
                           var headerName = xhr.getResponseHeader("Content-disposition");
                           var fileName = decodeURIComponent(headerName).substring(20);
                           aTag.download = fileName;
                           aTag.href = URL.createObjectURL(blob);
                           aTag.click();
                           URL.revokeObjectURL(blob);
                       }
                   };
                   // 发送ajax请求
                   var formdata=new FormData();
                   formdata.append("cardList",arr);
                   formdata.append("rivalName",this.form.rivalName);
                   formdata.append("minMoney",this.form.minMoney);
                   formdata.append("maxMoney",this.form.maxMoney);
                   formdata.append("caseId",caseId);
                   formdata.append("endTime",getMyDate(this.form.endTime));
                   formdata.append("beginTime",getMyDate(this.form.beginTime));
                   xhr.send(formdata);
               },
               handleCurrentChange(val) {
                   this.currentPage = val;
                   this.getlist(this.currentPage)
               },
               getlist(showType){
            	   this.showType = showType;
                   request({
                       url: 'bill/stream/abstractstatistics/'+this.currentPage+'/'+this.pageSize,
                       method: 'post',
                       data:{
                           rivalName : this.form.rivalName,
                           minMoney : this.form.minMoney,
                           maxMoney : this.form.maxMoney,
                           beginTime : getMyDate(this.form.beginTime),
                           endTime : getMyDate(this.form.endTime),
                           cardList : arr,
                           caseId:caseId,
                           showType : showType
                       }
                   }).then(result=>{
                       let xAxis = result.data.data.allRows.map(m => m.CONTENT_ABSTRACT);
                       let data1= result.data.data.allRows.map(m => {
                           let zy=m.CONTENT_ABSTRACT;//摘要
                           let count=m.TRANSACTIONTIMES;//次数
                           return {
                               'name': zy,
                               'value':count
                           }
                       });
                       let data2= result.data.data.allRows.map(m => {
                           let zy=m.CONTENT_ABSTRACT;//摘要
                           let money=m.TRANSACTIONMONEY;//交易量
                           return {
                               'name': zy,
                               'value':money
                           }
                       });
                       if (showType==0){
                           showEcharts_cake("main1","交易次数",xAxis,data1)
                           showEcharts_cake("main2","交易金额",xAxis,data2)
                       }
                       this.tableData=result.data.data.rows;
                       this.total=result.data.data.total;
                   })
               }
           }
       })
        function tabDialog(CONTENT_ABSTRACT,sign) {
            var param = {
                cardList:arr,
                caseId:caseId,
                contentAbstract:CONTENT_ABSTRACT,
            };
            if(parent.parent._checkedAccount.length>=1000){
                param.cardList="-1";//默认超过1000个节点为全选，不需要去后台传数据
            };
            var d = top.dialog({
                title : '摘要统计详情',
                modal : true,
                url : '${ctx}/bill/stream/d3/inaccountStatisticsDialogInit',
                height : 750,
                width : 1500,
                data : param,
                onshow : function () {
                }
            });
            d.show();
            return false;
        }
        $("#listForm").validate({
            rules: {
                minmoney : {
                    digits:true
                },
                maxmoney : {
                    digits:true
                }
            },
            messages: {
                minmoney:'请输入一个正整数',
                maxmoney:'请输入一个正整数',
            }
        });

        function _checkedCallback(_checkedAccount) {
            if(_checkedAccount&&_checkedAccount.length>0){
                arr = _checkedAccount.map(m=>{
                    return "'"+m.split("_")[1]+"'";
                });
                arr = arr.join(',');
               dg()
            }else{
                arr=[]
                arr = arr.join(',');
                abstr.tableData=[]
                abstr.total=""
                showEcharts_cake("main1","交易次数",null,null)
                showEcharts_cake("main2","交易次数",null,null)
                dg()
            }
        }
        /*-----------------------easyui表格-----------------------------*/
        /** 页面初始化完成 **/
        _checkedCallback(parent.parent._checkedAccount)
        function dg(){
            abstr.showType=1
            setTimeout(function(){
	            $('#dg').datagrid({
	                url: '${ctx}/bill/stream/abstractstatistics_easyui',
	                method: 'post',
	                iconCls: 'icon-save',
	                queryParams:{//每次请求的参数
	                    rivalName: abstr.form.rivalName,
	                    minMoney: abstr.form.minMoney,
	                    maxMoney: abstr.form.maxMoney,
	                    beginTime: getMyDate(abstr.form.beginTime),
	                    endTime: getMyDate(abstr.form.endTime),
	                    cardList: arr,
	                    caseId:caseId,
	                    showType : abstr.showType
	                },
                    pageSize:30,
                    pageList:[30,50,100,150,200],
	                pageNumber:1,//当前页号,
	                //sortName:"TOTALMONEY",//排序列名称 设置后将向后台传送名为sort的post/get参数
	                //sortOrder:"desc",//排序列升降序 设置后将向后台传送名为order的post/get参数

	                loadMsg:"正在加载，请稍后",//加载数据时的提示信息
	                emptyMsg:"暂无信息",//加载数据为空时的信息
	                height: ($(window).height())-($('.stream_search').outerHeight(true))-50,
	                rownumbers:true,//序号
	                fitColumns: true,//使表格自适应页面宽度
	                pagination: true,//是否分页
	                singleSelect: true,
	                columns:[[ //每一列的具体设置。
	                    {field:'CONTENT_ABSTRACT',title:'摘要',width:"20%"},
	                    {field:'TRANSACTIONTIMES',title:'交易次数',width:"20%",sortable : true,
	                        formatter: function(value,row,index){ //当前值，当前的row，当前的索引
	                            let CONTENT_ABSTRACT = row.CONTENT_ABSTRACT;
	                            return '<a href="#" onclick="tabDialog(\''+CONTENT_ABSTRACT+'\',1)">'+value+'</a>'
	                        }
	                    },
	                    // {field:'TRANSACTIONTIMESPER',title:'交易次数比',width:"20%", sortable : true},
	                    {field:'TRANSACTIONMONEY',title:'交易金额',width:"20%", sortable : true},
	                    // {field:'TRANSACTIONMONEYPER',title:'交易金额比',width:"20%", sortable : true}
	                ]],
	                onHeaderContextMenu: function(e, field){
	                    e.preventDefault();
	                    if (!cmenu){
	                        createColumnMenu();
	                    }
	                    cmenu.menu('show', {
	                        left:e.pageX,
	                        top:e.pageY
	                    });
	                },
	                onLoadSuccess: function(){
	                    parent.sheZhiHeight()
	                }
	            });
            },100);
        }
    </script>
    <script src="${ctx}/bower_components/easyui/common/titleHide.js"></script>
    <style>
        .panel-header,
        .panel-body {
            border-color: #d3d3d3!important;
        }
        .el-form-item {
            margin-bottom: 0;
        }
        .stream_search {
            margin: -20px 0 0 0;
        }
        .el-input__inner {
            border-color: #D2D6DE;
            font-size: 12px;
            border-color: #e4e4e4;
        }
        .zcdbtn-con {
            display: inline-block;
        }
        .el-button{
            width: 70px;
            height: 30px;
            line-height: 0px;
        }
        button.el-button.daobtn.el-button--primary{
            background-color: #23B7E5;
            border-color: #23B7E5;
        }
        .content-wrapper {
            padding: 10px;
        }
        input.error { border: 1px solid red; }
        label.error {
            background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
            padding-left: 16px;
            padding-bottom: 2px;
            font-weight: bold;
            color: #EA5200;
        }
        .badge{
            background-color: #f7051f;
        }
        .col-md-10 {
            width: 86%;
        }
        .el-form-item__label{
            color: #6f7689;
            font-weight: 400;
            font-size: 13px;
        }
        .el-form-item__label{
            color: #6f7689;
        }
        button.el-button.el-button--default.reset_button {
            background-color: #f4f4f4;
            color: #444;
            border-color: #ddd;
        }
        .button.el-button.el-button--default.reset_button:focus, button.el-button.el-button--default.reset_button:hover{
            border-color: #adadad;
            background-color: #e7e7e7;
        }
        .casemanage-switch .casemanage-zhexiantu.active {
            background-color: #4695ed;
        }
        .casemanage-switch .casemanage-zhexiantu {
            background-color: #f2f6f9;
            float: left;
            width: 50px;
            height: 35px;
            display: block;
            cursor: pointer;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            line-height: 35px;
            text-align: center;
        }
        #font_zhexian{
            color: #C1C2C3;
            font-size: 18px;
        }
        #font_zhexian.active{
            color: #F4F9FE;
        }
        .el-input__inner:hover{
            border-color:#4695ed;
        }
        .el-input__inner:focus{
            border-color:#4695ed;
        }
        .el-dialog--small{
            width: 95%;
            margin-top: 67px;
        }
        .el-button--primary{
            background-color:#4695ed;
            border-color:#4695ed;
        }
        .el-button--primary:focus, .el-button--primary:hover{
            background: #61a8f5;
            border-color: #61a8f5;
        }
        .el-pagination {
            margin-top: 10px;
        }
    </style>